<template>
    <div class="home-style">
        <van-search v-model="search" placeholder="清输入搜索关键词" input-align="center" @search="onSearch"/>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in bannerData" :key="index">
                <!-- <img :src="item.picUrl" alt=""> -->
                <van-image :src="item.picUrl" lazy-load />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>
<script>
import { Toast } from 'vant';
//import axios from 'axios';
export default { 
    data() {
        return {
            search: '',
            bannerData:[]
        };
    },
    methods:{
         //完成一个方法，实现网络请求轮播数据的功能
        getBanner(){
            this.$request('get','/recommend/banner')
            .then(response=> {
                console.log(response);
                this.bannerData = response.data;
                console.log(this.bannerData)
            })

            .catch(function (error){
                console.log(error);
             });
            },
            onSearch(val){
          Toast(val);
        }
    },
    created(){
        this.getBanner();
    },
    mounted(){

    }
};
</script>
<style scoped>
  /* .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  } */
</style>
